<template>
    <div class="common-layout">
        <el-container>
            <el-header class="common-header">
                <AllHead></AllHead>
            </el-header>
            <el-container>
                <el-aside>
                    <div class="item">
                        <ChatRound @click="showChose(0)" class="chatIcon" style="width: 50px; height: 50px;" :class="{'selected':wsStore.show[0]}" />
                        <svg :class="{'selected':wsStore.show[1]}"  @click="showChose(1)" class="chatIcon" xmlns="follow.svg" width="30" height="30"
                            viewBox="0 0 24 24">
                            <g fill="none" fill-rule="evenodd">
                                <path
                                    d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z">
                                </path>
                                <path fill="currentColor"
                                    d="M11 2a5 5 0 1 0 0 10a5 5 0 0 0 0-10m0 11c-2.395 0-4.575.694-6.178 1.672c-.8.488-1.484 1.064-1.978 1.69C2.358 16.976 2 17.713 2 18.5c0 .845.411 1.511 1.003 1.986c.56.45 1.299.748 2.084.956C6.665 21.859 8.771 22 11 22q.346 0 .685-.005a1 1 0 0 0 .89-1.428A6 6 0 0 1 12 18c0-1.252.383-2.412 1.037-3.373a1 1 0 0 0-.72-1.557Q11.671 13 11 13m10.708 3.068a1 1 0 0 0-1.414-1.414l-3.182 3.182l-1.414-1.414a1 1 0 0 0-1.414 1.414l2.05 2.05a1.1 1.1 0 0 0 1.556 0z">
                                </path>
                            </g>
                        </svg>
                        <svg :class="{'selected':wsStore.show[2]}" @click="showChose(2)" class="chatIcon" xmlns="fan.svg" width="30" height="30"
                            viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M16.004 1.25C18.311 1.25 20 3.128 20 5.75c0 2.292-1.23 4.464-3.295 6.485c-.481.47-.98.909-1.482 1.31l.265 1.32l1.375 7.5a.75.75 0 0 1-.982.844l-3.512-1.207a.75.75 0 0 0-.488 0L8.37 23.209a.75.75 0 0 1-.982-.844l1.378-7.512l.261-1.309c-.5-.4-1-.838-1.481-1.31C5.479 10.215 4.25 8.043 4.25 5.75c0-2.622 1.689-4.5 3.996-4.5c1.55 0 2.947.752 3.832 1.967l.047.067l.047-.067a4.73 4.73 0 0 1 3.612-1.962zM13.89 14.531c-.418.285-.828.542-1.218.77l-.18.103a.75.75 0 0 1-.734 0l-.071-.04l-.46-.272q-.424-.26-.868-.562l-.121.605l-1.145 6.239l2.3-.79a2.25 2.25 0 0 1 1.284-.054l.18.053l2.299.79l-1.141-6.226zM16.004 2.75c-1.464 0-2.731.983-3.159 2.459c-.209.721-1.231.721-1.44 0c-.428-1.476-1.695-2.459-3.16-2.459c-1.44 0-2.495 1.173-2.495 3c0 1.811 1.039 3.647 2.844 5.412a19.6 19.6 0 0 0 3.734 2.84l-.019-.011l-.184-.111l.147-.088a20 20 0 0 0 3.015-2.278l.37-.352C17.46 9.397 18.5 7.561 18.5 5.75c0-1.827-1.055-3-2.496-3">
                            </path>
                        </svg>
                    </div>
                    <Dialog v-show="wsStore.show[0]"></Dialog>
                    <Follower v-show="wsStore.show[1]"></Follower>
                    <Fan v-show="wsStore.show[2]"></Fan>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AllHead from '../Main/AllHead.vue';
import Dialog from './Dialog.vue';
import Fan from './Fan.vue';
import Follower from './Follower.vue';
import { useWebSocketStore } from '@/stores/websocket';
import { useRouter } from 'vue-router';
let wsStore = useWebSocketStore()
let router = useRouter()
router.beforeEach((to,from)=>{
    if(to.path!='/chat'&&to.name!='followermsg'&&to.name!='fansmg'){
        wsStore.show = [true, false, false]
    }
})
// 左侧三个组件展示隐藏
function showChose(index: number) {
    wsStore.show = [false, false, false]
    wsStore.show[index] = true
    router.push({
        path:'/chat'
    })
}

// 

</script>

<style scoped>
/* 食谱网站色调样式 */
.item {
    float: left;
    height: 100%;
    width: 100px;
    border-right: 2px solid #E8D5B7;
    text-align: center;
    background: linear-gradient(135deg, #FFF9F0 0%, #F8F1E5 100%);
}

.chatIcon {
    width: 60px;
    height: 60px;
    margin-top: 50px;
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px;
}

.chatIcon:hover {
    background-color: #FFA726;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 167, 38, 0.3);
}

.selected{
    background-color: #FFA726;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 167, 38, 0.3);
}

.common-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #FFF9F0 0%, #F5E6D3 100%);
}

.common-header {
    position: fixed;
    z-index: 999;
    height: 10vh;
    width: 100%;
    background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-main {
    padding: 15px;
    padding-top: 10vh;
    background: linear-gradient(135deg, #FFFCF5 0%, #F9F3E9 100%);
}

.el-aside {
    width: 400px;
    padding: 20px;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 10vh;
    background: linear-gradient(135deg, #FFFFFF 0%, #FDF8F2 100%);
    box-shadow: 4px 0 15px rgba(139, 69, 19, 0.1);
    border-right: 1px solid #E8D5B7;
}
</style>
